<template>
  <div class="refund-items">
    <el-table
      v-loading="loading"
      element-loading-text="数据载入中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.4)"
      :data="items">
      <el-table-column
        width="160px"
        label="申请时间">
        <template slot-scope="scope">
          {{scope.row.apply_date}}
        </template>
      </el-table-column>
      <el-table-column
        width="220px"
        label="申请单号">
        <template  slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击复制" placement="top">
            <el-tag
              style="cursor: pointer"
              size="mini"
              type="info"
              v-clipboard:copy="scope.row.refund_no"
              v-clipboard:success="onCopySuccess"
              v-clipboard:error="onCopyError"
            >{{scope.row.refund_no}}</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        width="220px"
        label="订单编号">
        <template  slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击复制" placement="top">
            <el-tag
              style="cursor: pointer"
              size="mini"
              type="info"
              v-clipboard:copy="scope.row.order_no"
              v-clipboard:success="onCopySuccess"
              v-clipboard:error="onCopyError"
            >{{scope.row.order_no}}</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        width="150px"
        label="联系人">
        <template  slot-scope="scope">
          {{scope.row.member.nickname}}
          <br />
          <template v-if="scope.row.member.mobile">[{{scope.row.member.mobile}}]</template>
        </template>
      </el-table-column>
      <el-table-column
        label="退款方式">
        <template  slot-scope="scope">
          {{payMethod[scope.row.pay_method]}}
        </template>
      </el-table-column>
      <el-table-column
        label="退款金额">
        <template  slot-scope="scope">
          {{(Number(scope.row.refund_money) / 100).toFixed(2)}}元
        </template>
      </el-table-column>
      <el-table-column
        width="150px"
        label="申请原因">
        <template  slot-scope="scope">
          {{scope.row.refund_reason}}
        </template>
      </el-table-column>
      <el-table-column
        width="150px"
        label="拒绝原因">
        <template  slot-scope="scope">
          {{scope.row.refuse_reason}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template  slot-scope="scope">
          {{statusText[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column
        width="150px"
        label="操作管理员">
        <template  slot-scope="scope">
          <template v-if="scope.row.administrator">
            {{scope.row.administrator.name}}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200px"
        label="操作">
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="little"
            @click="action_order_no = scope.row.order_no; showOrderDetail = true"
            type="success">订单详情</el-button>
          <el-button
            size="little"
            @click="action_id = scope.row.id; showCancelTravelItems = true"
            type="warning">取消的出行人列表</el-button>
          <el-button
            size="little"
            @click="agree(scope.row.id, scope.row.pay_method)"
            v-if="scope.row.status === 1"
            type="primary">同意退款</el-button>
          <el-button
            size="little"
            @click="refuse(scope.row.id)"
            v-if="scope.row.status === 1"
            type="danger">拒绝申请</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <ui-order-detail
      :order-no="action_order_no"
      :show.sync="showOrderDetail"></ui-order-detail>
    <ui-cancel-travel-items
      :refund-id="action_id"
      :show.sync="showCancelTravelItems"></ui-cancel-travel-items>
  </div>
</template>
<script>
import uiOrderDetail from './order-detail'
import uiCancelTravelItems from './cancel-travel-items'
export default {
  components: {
    uiOrderDetail,
    uiCancelTravelItems
  },
  props: {
    status: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      action_id: 0,
      showCancelTravelItems: false,
      action_order_no: '',
      showOrderDetail: false,
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      items: [],
      statusText: {
        1: '待处理',
        2: '第三方退款处理中',
        3: '退款成功',
        4: '退款被拒绝'
      },
      payMethod: {
        1: '微信',
        2: '微信',
        3: '支付宝'
      }
    }
  },
  watch: {
    $route (route) {
      if (this.$route.params.page) {
        this.page = Number(this.$route.params.page)
      }
      this.getItems()
    },
    status () {
      this.page = 1
      this.items = []
      this.getItems()
    }
  },
  methods: {
    /**
     * 同意退款
     */
    refuse (refundId) {
      this.$prompt('请输入拒绝理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        this.showLoading()
        this
          .$api
          .activityOrderRefund
          .refuse(refundId, value)
          .then(r => {
            this.toast('操作成功')
            this.getItems()
          })
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 同意退款
     */
    agree (refundId, payMethod) {
      let notice = ''
      switch (payMethod) {
        case 1:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 2:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 3:
          notice += '资金将原路返回到该用户的支付宝账户中，并且此操作无法恢复'
          break
      }
      this.$confirm(notice, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.showLoading()
        this
          .$api
          .activityOrderRefund
          .agree(refundId)
          .then(r => {
            this.toast('操作成功')
            this.getItems()
          })
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 页码改变事件
     */
    currentPage (page) {
      this.jump({
        name: 'activity.refund.items.' + this.status,
        params: {
          page: page
        }
      })
    },
    /**
     * @purpose 获取订单列表
     */
    getItems () {
      this.loading = true
      this
        .$api
        .activityOrderRefund
        .items(this.status, this.page, this.size)
        .then(r => {
          this.loading = false
          this.items = r.list
          this.total = r.total
        }).catch(() => {})
    },
    /**
     * 复制成功回调
     */
    onCopySuccess () {
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    /**
     *  复制失败回调
     */
    onCopyError (e) {
      this.$alert(e.text, '复制失败！请您手动复制下面的文本。', {
        confirmButtonText: '关闭',
        callback: action => {}
      })
    }
  },
  created () {
    this.getItems()
  }
}
</script>
<style scoped></style>
